Skip to main content

Overview

Drawings in DXcharts Lite​

This page describes how to integrate and manage the drawings component in dxcharts-lite.

Enabling the drawings component​

To use drawings, your project must include the dxchart5-core-modules package. If available, attach the drawings component to the chart using the code below:

export const enableDrawingModule = (chart: Chart) => {
    const chartWithDrawings = attachDrawingsComponent(chart);
}

Starting a drawing​

Use the startDrawing method from DrawingsComponent to initiate a drawing.

export const addDrawing = (chart: ChartWithDrawings, type: DrawingType) => {
    const configCopy = cloneUnsafe(DEFAULT_DRAWINGS_CONFIG[type]);
    chart.drawings.startDrawing(configCopy);
}

You must provide a full drawing configuration object to startDrawing. (A simplified version that accepts only a drawing type is planned for future releases.)

To import drawing types from the library:

import { drawingTypes } from '@dx-private/dxchart5-react/dist/chart/model/drawing.model';
import { DEFAULT_DRAWINGS_CONFIG } from '@dx-private/dxchart5-react/dist/config/drawings-config';
// list of default drawing types
console.log(drawingTypes);
// default drawing config for each type - Record<DrawingType, DrawingConfig>
console.log(DEFAULT_DRAWINGS_CONFIG);

Removing a drawing​

Call removeDrawing with the drawing ID to delete it from the chart.

export const removeDrawing = (chart: ChartWithDrawings) => {
    const drawingsComponent = chart.drawings;
    const symbol = chart.chartModel.mainCandleSeries.instrument.symbol;
    const lastDrawingModel = lastOf(drawingsComponent.model.models[symbol]);
    lastDrawingModel && drawingsComponent.removeDrawing(lastDrawingModel.id);
}

🔸 Updating a drawing​

Use updateDrawing to modify an existing drawing by its ID. In this example, the method toggles the drawing's visibility.

export const updateDrawing = (chart: ChartWithDrawings) => {
    const drawingsComponent = chart.drawings;
    const symbol = chart.chartModel.mainCandleSeries.instrument.symbol;
    const lastDrawingModel = lastOf(drawingsComponent.model.models[symbol]);
    if (lastDrawingModel) {
        lastDrawingModel.visible = !lastDrawingModel.visible;
        lastDrawingModel && drawingsComponent.updateDrawing(lastDrawingModel);
    }
}

Replacing a single drawing​

Call setDrawing to override all existing instrument drawings with a new one.

This method does not override drawings added via setDrawings.

export const setDrawing = (chart: ChartWithDrawings) => {
    const symbol = chart.chartModel.mainCandleSeries.instrument.symbol;
    const drawingType: DrawingType = 'gann_box';
    const firstIdx = chart.chartModel.mainCandleSeries.dataIdxEnd - 50;
    const secondIdx = firstIdx - 10;
    const firstDrawingCandle = chart.chartModel.mainCandleSeries.dataPoints[firstIdx]!;
    const secondDrawingCandle = chart.chartModel.mainCandleSeries.dataPoints[secondIdx]!;
    const points = [
        {
            timestamp: firstDrawingCandle.timestamp,
            value: firstDrawingCandle.close + firstDrawingCandle.close * 0.1,
        },
        {
            timestamp: secondDrawingCandle.timestamp + Math.pow(10, 8),
            value: secondDrawingCandle.close - secondDrawingCandle.close * 0.1,
        },
    ];
    const drawing: DrawingModel<DrawingType> = new DrawingModel(
        `${drawingType}_${uuid()}`,
        1,
        drawingType,
        points,
        DEFAULT_DRAWINGS_CONFIG[drawingType].properties,
    );
    chart.drawings.setDrawing(symbol, drawing);
}

Replacing all drawings​

Use setDrawings to override all instrument drawings at once.

This method replaces all existing drawings, so use with caution.

export const setDrawings = (chart: ChartWithDrawings) => {
    const symbol = chart.chartModel.mainCandleSeries.instrument.symbol;
    const instrumentDrawings: Drawing<DrawingType>[] = [];
    const drawings: Record<string, Drawing<DrawingType>[]> = { [symbol]: instrumentDrawings };
    const drawingsInitialData: DrawingType[] = ['line', 'rectangle'];
    drawingsInitialData.forEach((drawingType, i) => {
        const firstIdx = chart.chartModel.mainCandleSeries.dataIdxEnd - i * 40;
        const secondIdx = firstIdx - i * 20;
        const firstDrawingCandle = chart.chartModel.mainCandleSeries.dataPoints[firstIdx]!;
        const secondDrawingCandle = chart.chartModel.mainCandleSeries.dataPoints[secondIdx]!;
        const points = [
            {
                timestamp: firstDrawingCandle.timestamp,
                value: firstDrawingCandle.close + firstDrawingCandle.close * 0.1,
            },
            {
                timestamp: secondDrawingCandle.timestamp + Math.pow(10, 8),
                value: secondDrawingCandle.close - secondDrawingCandle.close * 0.1,
            },
        ];
        const figure: DrawingModel<DrawingType> = new DrawingModel(
            `${drawingType}_${i}`,
            1,
            drawingType,
            points,
            DEFAULT_DRAWINGS_CONFIG[drawingType].properties,
        );
        instrumentDrawings.push({ ...figure, _internalDrawing: figure });
    });
    chart.drawings.setDrawings(drawings);
}

Live example​

Custom label formatting​

To override the default X-label formatting for drawings, define a custom formatter in the configuration:

export const configDrawingsCutomLabels = {
    components: {
        drawings: {
            xAxisLabelFormat: [
                {
                    format: '',
                    customFormatter: (date: number) => {
                        return new Date(date).toLocaleString('en-GB');
                    },
                },
            ],
        },
    },
}